<!--
 * @Author: Li Zengkun
 * @Date: 2022-09-28 16:03:28
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-09-29 17:13:11
 * @Description: 
-->
<template>
  <div>
    <el-card>
      <template #header>
        <span>账户信息</span>
      </template>
      <el-form ref="formRef" label-position="top" :rules="rules" :model="form">
        <el-form-item label="账户">
          <el-input v-model="form.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="fullname">
          <el-input v-model="form.fullname"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="form.sex">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号" prop="tel">
          <el-input v-model.number="form.tel"></el-input>
        </el-form-item>
        <el-form-item label="头像" prop="avatar">
          <AvatarUpload
            v-model:url="form.avatar"
            :defaultImages="form.avatar"
            action="http://localhost:3003/upload/common"
            :data="{type:'avatar'}"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit" round>修改</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
 
<script setup>
import { ref, reactive } from "vue";
import { admin } from "@/api";
import {useUserStore} from "@/stores"
import AvatarUpload from "@/components/common/AvatarUpload.vue";

const userStore = useUserStore()
const resp = await admin.info({ id: sessionStorage.id });
const formRef = ref(null);
const form = ref(JSON.parse(JSON.stringify(userStore.data)));
// const form = ref(userStore.data);

console.log(form.value);
const rules = reactive({
  fullname: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
  tel: [{ required: true, message: "请输入手机号", trigger: "blur" }],
  avatar: [{ required: true, message: "请选择头像", trigger: "blur" }],
});

console.log(form.value);

const handleSubmit = () => {
  console.log(form.value);
  formRef.value.validate(async(valid,fields)=>{
      if(valid){
          let {status,msg}  = await admin.update(form.value)
          if(status){
            userStore.updateUser(form.value)
          }
          ElMessage({
              type:status?'success':'error',
              message:msg
          })
      }
      else{
          ElMessage.error('请完善表单')
      }


  })
};
</script>

<style lang='less' scoped>
</style>
